<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        #app {
            border: 1px solid blue;
            padding: 10px;
        }

        .box {
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h1> {{title}} </h1>
        <hr>
        <!-- 1. 通过属性将父组件的内容传递给子组件 -->
        <!-- 属性传值的时候，名称不要使用大写，可以使用连接符 -->
        <cart :msg="title" name="高举" :age="18" :pro-list="pro"></cart>
    </div>
</body>
<template id="cart">
    <div class="box">
        购物车 --- {{title}}
        <br>
        <!-- 3. 使用父组件传递过来的数据 -->
        父组件传递的 title: {{ msg }}
        <p>name: {{name}}</p>
        <p>age: {{age + 1}} </p>
        <p>
            商品信息：{{proList.proname}} -- {{ proList.price }} -- {{proList.kind}}
        </p>
    </div>
</template>
<script>

    // 子组件
    const cart = {
        template: '#cart',
        data() {
            return {
                title: '鹅鹅鹅'
            }
        },
        // 2. 接收父组件传递过来的数据
        props: ['msg', 'name', 'age', 'proList']
    }
    // 父组件
    const app = {
        data() {
            return {
                title: '锄禾日当午',
                pro: {
                    proname: 'iPhone 15Pro',
                    price: '199.99',
                    kind: '手机'
                }
            }
        },
        methods: {},
        components: {
            cart
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>